<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix"></image>
      <text class="title">请假系统登录</text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <!-- <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" /> -->
        <uni-easyinput v-model="loginForm.username" class="easyinput" :inputBorder="false" placeholder="请输入账号" maxlength="30"></uni-easyinput>
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <uni-easyinput type="password" v-model="loginForm.password" class="easyinput" :inputBorder="false" placeholder="请输入密码" maxlength="20"></uni-easyinput>
      </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
        <view class="login-code"> 
          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
        </view  >
      </view>
      <view class="changeBox">
      <u-radio-group
        v-model="loginForm.type"
        placement="row"
        @change="groupChange"
        class="changeUser"
      >
        <u-radio
          :customStyle="{marginBottom: '-1rpx',marginLeft:'20rpx'}"
          v-for="(item, index) in radiolist1"
          :key="index"
          :label="item.name"
          :name="item.value"
        >
        </u-radio>
      </u-radio-group>
    </view>

      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
    </view>

    <!-- <view class="xieyi text-center">
      <text class="text-grey1">登录即代表同意</text>
      <text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
      <text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
    </view> -->
  </view>
</template>

<script>
  import { getCodeImg,getRouters } from '@/api/login'
  import { setUser,setRouters,setLoginPeople } from '@/utils/auth'

  export default {
    data() {
      return {
          // 基本案列数据
          radiolist1: [{
            name: '教师',
            value: 2
          },
          {
            name: '学生',
            value: 1
          }
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: "",
          password: "",
          code: "",
          uuid: '',
          type:''
        }
      }
    },
    created() {
      this.getCode()
    },
    methods: {
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else if (this.loginForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else if (this.loginForm.type == "") {
          this.$modal.msgError("请选择登录身份")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 获取菜单
        // getRouters().then(res => {
        //   setRouters(res.data)
        // })
        // 设置用户信息
        this.$store.dispatch('GetInfo',{type:this.loginForm.type}).then(res => {
			// console.log(res)
			    setUser(res.user)
				setLoginPeople(res.LoginPeople)
          this.$tab.reLaunch('/pages/index')
        })
      },
      groupChange(n) {
        this.loginForm.type = n
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #ffffff;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 42rpx;
      text-align: center;
      padding-top: 15%;

      image {
        border-radius: 8rpx;
      }

      .title {
        margin-left: 20rpx;
      }
    }

    .login-form-content {
      text-align: center;
      margin: 40rpx auto;
      margin-top: 15%;
      width: 80%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .input-item {
        margin: 40rpx auto;
        background-color: #f5f6f7;
        height: 60rpx;
        border-radius: 40rpx;

        .icon {
          font-size: 38rpx;
          margin-left: 20rpx;
          color: #999;
        }

        .input {
          // width: 100%;
          width: 400rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          text-align: left;
          padding-left: 30rpx;
        }

        .easyinput{
          width: 400rpx;
          font-size: 28rpx;
          line-height: 40rpx;
          text-align: left;
          padding-left: 10rpx;
        }

      }

      .login-btn {
        width: 400rpx;
        margin-top: 30rpx;
        height: 90rpx;
      }

      .xieyi {
        color: #333;
        margin-top: 40rpx;
      }
      
      .login-code {
        height: 76rpx;
        float: right;
      
        .login-code-img {
          height: 76rpx;
          position: absolute;
          margin-left: 20rpx;
          width: 200rpx;
        }
      }

      .changeBox{
        width: 300rpx;
        height: 60rpx;
        margin: 20rpx;
        .changeUser{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
        }
      }
    }
  }

</style>
